<template>
  <div>
    <div style="height:140px">
      <title1></title1>

      <!--头部面包屑-->
      <div class="breadCrumbBox flexCenter">
        <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
          <a-breadcrumb separator=">">
            <a-breadcrumb-item v-if="this.homeFlag">
              <router-link :to="home">首页</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item v-if="this.projectFlag">
              <router-link :to="projectDetail">{{this.projectName}}</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item>{{this.laborName}}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
      </div>
    </div>
    <!--人员详情部分-->
    <div class="top flexStart">
      <div class="logo">
        <div class="logo_text">施工单位</div>
        <div style="text-align:center;font-size:16px">{{this.tenderName}}</div>
      </div>
      <div class="right">
        <div class="title">{{this.laborName}}</div>

        <div class="info flexStart2">
          <div>
            <span>社会统一信用代码：{{this.topInfo.creditCode}}</span>
            <span></span>
          </div>
          <div>
            <span>专业分类：{{this.topInfo.major}}</span>
            <span></span>
          </div>
          <div>
            <span>
              工程造价：{{this.topInfo.cost}}
              <span v-if="topInfo.cost">亿元</span>
            </span>
            <span></span>
          </div>
          <div>
            <span>
              建设规模：{{this.topInfo.scale}}
              <span v-if="topInfo.scale">km</span>
            </span>
            <span></span>
          </div>
          <div>
            <span>开工时间：{{this.topInfo.startTime}}</span>
            <span></span>
          </div>
          <div>
            <span>计划完工时间：{{this.topInfo.endTime}}</span>
            <span></span>
          </div>
          <div>
            <span>
              建设周期：{{this.topInfo.buildingPeriod}}
              <span v-if="topInfo.buildingPeriod">月</span>
            </span>
            <span></span>
          </div>
          <div>
            <span>项目经理：</span>
            <span
              @click="peopleDetail(topInfo.projectManagerPersonId,'project')"
            >{{this.topInfo.projectManagerFullName}}</span>
          </div>
          <div>
            <span>劳资专管员：</span>
            <span
              @click="peopleDetail(topInfo.laborManagerPersonId,'labor')"
            >{{this.topInfo.laborManagerFullName}}</span>
          </div>
          <div>
            <span>中标通知书：</span>
            <span
              @click="showPdf(topInfo.bidNoticeUrl)"
              style="cursor:pointer;"
            >{{this.topInfo.bidNoticeName}}</span>
          </div>
          <div>
            <span>施工合同：</span>
            <span
              @click="showPdf(topInfo.constructionContractUrl)"
              style="cursor:pointer;"
            >{{this.topInfo.constructionContractName}}</span>
          </div>
          <div>
            <span>支付担保合同：</span>
            <span
              @click="showPdf(topInfo.guaranteeContracUrl)"
              style="cursor:pointer;"
            >{{this.topInfo.guaranteeContracName}}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="informationScreeningBox" ref="piediv" :class="isFixed?'fixed':'noFixed'">
      <!--:class="isFixed?'fixed':'noFixed'"-->
      <a-tabs :activeKey="defaultActiveKey" @change="callback">
        <a-tab-pane key="1" tab="分包单位"></a-tab-pane>
        <a-tab-pane key="2" tab="专户信息"></a-tab-pane>
        <a-tab-pane key="3" tab="工程计量款"></a-tab-pane>
        <a-tab-pane key="4" tab="管理制度"></a-tab-pane>
        <a-tab-pane key="5" tab="维权信息告示牌"></a-tab-pane>
      </a-tabs>
    </div>
    <div class="informationScreeningBox" v-if="isFixed">
      <a-tabs :activeKey="defaultActiveKey" @change="callback">
        <a-tab-pane key="1" tab="分包单位"></a-tab-pane>
        <a-tab-pane key="2" tab="专户信息"></a-tab-pane>
        <a-tab-pane key="3" tab="工程计量款"></a-tab-pane>
        <a-tab-pane key="4" tab="管理制度"></a-tab-pane>
        <a-tab-pane key="5" tab="维权信息告示牌"></a-tab-pane>
      </a-tabs>
    </div>

    <div class="personDetailBox" ref="distanceTopA">
      <div class="certificatePoint" style="position: relative;bottom:195px;"></div>
      <laborUnit></laborUnit>
    </div>

    <div class="personDetailBoxB" ref="distanceTopB">
      <div class="attendancePoint" style="position: relative;bottom: 195px;"></div>
      <accountInfo :queryData="this.topInfo" />
    </div>

    <div class="personDetailBoxB" ref="distanceTopC">
      <div class="wagesPoint" style="position: relative;bottom: 195px;"></div>
      <project />
    </div>

    <div class="personDetailBoxC" ref="distanceTopD">
      <div class="wagesPoint2" style="position: relative;bottom: 195px;"></div>
      <manage />
    </div>
    <div class="personDetailBoxE" ref="distanceTopE">
      <div class="resumePoint" style="position: relative;bottom: 195px;"></div>
      <protection />
    </div>
    <supportCompany></supportCompany>
    <!-- 查看pdf -->
    <a-modal
      v-model="visible"
      title
      @ok="handleOk"
      :footer="null"
      :maskClosable="false"
      :centered="true"
    >
      <embed v-if="visible" width="1000" height="700" :src="this.pdfData" type />
    </a-modal>
  </div>
</template>

<script>
import title1 from '@/views/title/index.vue'
import accountInfo from './accountInfo/index.vue'
import project from './project/index.vue'
import manage from './manage/index.vue'
import laborUnit from './laborUnit/index.vue'
import protection from './protection/index'

import supportCompany from '@/views/supportCompany/index.vue'
import { getOrgSubsidiaryInfo } from '@/api/construction'
import { mapGetters } from 'vuex'

export default {
  beforeDestroy() {
    window.removeEventListener('scroll', this.test)
  },
  destroyed() {
    window.removeEventListener('scroll', this.test)
  },
  components: {
    title1,
    accountInfo,
    project,
    manage,
    laborUnit,
    protection,
    supportCompany
  },
  data() {
    return {
      home: '/gateway',
      projectDetail: '/projectDetails',
      defaultActiveKey: '1', // 默认选中的面板
      isFixed: false,
      positionSign: {
        positionSignA: false,
        positionSignB: false,
        positionSignC: false,
        positionSignD: false
      },
      imgUrlZ: require('../../assets/idCardZ.png'),
      imgUrlF: require('../../assets/idCardF.png'),
      labourHeight: '75px',
      contractHeight: '75px',
      labour: false,
      contract: false,
      visible: false,
      columns1: '',
      data2: '',
      columns2: '',
      data3: '',
      columns3: '',
      data4: '',
      columns4: '',
      orgId: '',
      projectName: '',
      laborName: '',
      topInfo: {},
      pdfData: '',
      tenderName: '',
      homeFlag: false,
      projectFlag: JSON.parse(sessionStorage.getItem('projectFlag'))
    }
  },
  created() {
    this.getTopInfo()
    this.homeFlag = JSON.parse(sessionStorage.getItem('homeFlag'))
    // console.log(this.homeFlag );
  },
  mounted() {
    window.scrollTo(0, 0)
    this.test = this.debounce(this.handleScroll, 20)
    window.addEventListener('scroll', this.test)
    if (sessionStorage.getItem('imgdata')) {
      this.projectName = JSON.parse(sessionStorage.getItem('imgdata')).fullName
    }

    this.tenderName = sessionStorage.getItem('tenderName')
    // console.log(this.tenderName);
    // console.log(this.homeFlag );

    // this.laborName = sessionStorage.getItem('laborName')

    // console.log(this.topInfo.orgName);

    
    //  console.log(this.topInfo);
  },
  methods: {
  
    getTopInfo() {
      let data = {
        orgId: sessionStorage.getItem('gatewayId'),
        projectId: sessionStorage.getItem('projectId')
      }
      getOrgSubsidiaryInfo(data).then((res) => {
        this.topInfo = res.data.data
        this.laborName = this.topInfo.orgName
        sessionStorage.setItem('laborName', this.laborName)
        // console.log(this.topInfo);
      })
    },
    debounce(fn, wait) {
      var timeout = null
      return function() {
        if (timeout !== null) clearTimeout(timeout)
        timeout = setTimeout(fn, wait)
      }
    },
    callback(tab) {
      this.defaultActiveKey = tab
      const tabObj = {
        '1': '.certificatePoint',
        '2': '.attendancePoint',
        '3': '.wagesPoint',
        '4': '.wagesPoint2',
        '5': '.resumePoint'
      }
      // window.location.hash = tabObj[tab];
      // document.getElementById(tabObj[tab]).scrollIntoView(true);
      // document.documentElement.scrollTop(300,)
      // this.$el.querySelector(tabObj[tab]).offsetTop(30)
      // this.$refs.distanceTopA.scrollTop = 0
      this.$el.querySelector(tabObj[tab]).scrollIntoView({ behavior: 'smooth', block: 'start' })
      // setTimeout(function(){
      //   document.querySelector(tabObj[tab]).scrollIntoView({ behavior: "smooth", block: "start"});
      // },1000);
    },

    changeLabourHeight() {
      this.labour = !this.labour
      if (this.labour) {
        this.labourHeight = '128px'
      } else {
        this.labourHeight = '75px'
      }
    },
    changeContractHeight() {
      this.contract = !this.contract
      if (this.contract) {
        this.contractHeight = '128px'
      } else {
        this.contractHeight = '75px'
      }
    },
    // test(){
    //   this.debounce(this.handleScroll, 100)
    // },
    handleScroll() {
      const distanceTopA = this.$refs.distanceTopA.getBoundingClientRect().top
      const distanceTopB = this.$refs.distanceTopB.getBoundingClientRect().top
      const distanceTopC = this.$refs.distanceTopC.getBoundingClientRect().top
      const distanceTopD = this.$refs.distanceTopD.getBoundingClientRect().top
      const distanceTopE = this.$refs.distanceTopE.getBoundingClientRect().top
      // console.log(distanceTopD);

      if (distanceTopA < 222) {
        this.isFixed = true
      } else {
        // if (!(this.isFixed)) return;
        this.isFixed = false
      }
      // console.log(1111);

      //       console.log(distanceTopC)

      //       console.log(distanceTopD)
      // console.log(distanceTopE);
      if (distanceTopA >= 50 && distanceTopA <= 620) {
        this.defaultActiveKey = '1'
      } else if (distanceTopB >= 50 && distanceTopB <= 220) {
        this.defaultActiveKey = '2'
      } else if (distanceTopC >= 50 && distanceTopC <= 220) {
        this.defaultActiveKey = '3'
      } else if (distanceTopD >= 50 && distanceTopD <= 220) {
        this.defaultActiveKey = '4'
      } else if (distanceTopE >= 50 && distanceTopE <= 305) {
        this.defaultActiveKey = '5'
      }
    },
    showPdf(val) {
      this.pdfData = val
      // console.log(this.pdfData);

      this.visible = true
    },
    handleOk(e) {
      //   console.log(e);
      this.visible = false
    },
    peopleDetail(id, type) {
      // let t=true
      sessionStorage.setItem('orgPersonId', id)
      // sessionStorage.setItem('projectFlag', t)
      this.$router.push({ path: '/personnelInformation2', query: { type: type } })
    }
  },
  computed: {
    labourState() {
      return {
        '--box-height': this.labourHeight
      }
    },
    contractState() {
      return {
        '--box-height': this.contractHeight
      }
    },
    ...mapGetters(['userInfo'])
  }
}
</script>

<style scoped>
div,
p,
span {
  font-family: 'Microsoft YaHei';
}
.breadCrumbBox {
  width: 100%;
  height: 40px;
  background-color: rgba(246, 248, 249, 1);
  position: fixed;
  top: 100px;
  z-index: 100;
}
::v-deep .ant-breadcrumb > span:last-child {
  color: rgba(20, 146, 255, 1);
}
.personDetailBox {
  width: 1200px;
  /*height: 500px;*/
  margin: auto;
  margin-bottom: 40px;
}
.personDetailBoxB {
  width: 1200px;
  margin: auto;
  margin-bottom: 40px;
}
.personDetailBoxC {
  width: 1200px;
  margin: auto;
  margin-bottom: 40px;
}
.personDetailBoxE {
  width: 1200px;
  margin: auto;
  margin-bottom: 140px;
}
.leftBox {
  width: 140px;
  height: 100%;
}
.rightBox {
  width: 1019px;
  height: 100%;
}
.photoBox {
  width: 140px;
  height: 172px;
}
.personnelCode {
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-top: 16px;
}
.code {
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
}
.jobInformation {
  font-size: 14px;
  width: 80px;
  height: 24px;
  text-align: center;
  border-radius: 0;
  margin: auto;
  margin-top: 14px;
}
.personName {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}
.personJob {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  margin-left: 36px;
}
.personCardBox {
  width: 100%;
  height: 162px;
  padding: 24px 78px 21px 30px;
  background-color: #f5faff;
  margin-top: 22px;
}
.personCardBox > div > p {
  font-size: 15px;
  color: #333;
  font-weight: 400;
}
.idCardBox > div > p {
  font-size: 14px;
  color: #666;
  font-weight: 400;
  margin-top: 16px;
  text-align: center;
}
.serviceInformationBox {
  margin-top: 25px;
}
.serviceInformationBox > p {
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
.serviceInformation {
  width: 100%;
  /*height: 128px;*/
  background-color: #f5faff;
  overflow: hidden;
}
.serviceInformation > div {
  margin-left: 30px;
}
.serviceInformation > div > span {
  display: inline-block;
  width: 340px;
}
.informationScreeningBox {
  width: 1200px;
  margin: auto;
  margin-top: 72px;
  margin-bottom: 30px;
}
.point {
  display: inline-block;
  width: 90px;
  height: 37px;
  text-align: center;
  line-height: 37px;
  border-bottom: 2px solid #1492ff;
  color: #1492ff;
  font-size: 16px;
}
.pointBox {
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 40px;
}
.labourClass {
  height: var(--box-height);
}
.contractClass {
  height: var(--box-height);
}
.fixed {
  position: fixed;
  top: 140px;
  background-color: white;
  color: white;
  left: calc(50% - 600px);
  margin: 0;
  z-index: 100;
  height: 45px;
}
.noFixed {
  position: static;
}
.positionSignAClass {
  height: 184px;
}
.positionSignBClass {
  height: 147px;
}
/*.personDetailBox > div{*/
/*  border-bottom: 1px solid #E4E4E4;*/
/*}*/
/*.serviceInformation > div{*/
/*  width: 100px;*/
/*}*/
/*.serviceInformation > div > p{*/
/*  margin: 0;*/
/*}*/
.breadCrumbBox {
  width: 100%;
  height: 40px;
  background-color: rgba(246, 248, 249, 1);
}
.top,
.tab {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 31px;
}
.flexStart1 {
  height: 33px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.topLogo {
  position: fixed;
  left: calc(50% - 600px);
  top: 0;
  z-index: 11;
  background: #ffffff;
}
.top {
  padding-top: 40px;
  margin-bottom: 70px;
  height: 300px;
}
.logo {
  margin-right: 41px;
}
.logo_text {
  width: 140px;
  height: 140px;
  background: #00cc00;
  color: #ffffff;
  line-height: 50px;
  font-size: 38px;
  padding: 20px 33px 24px 31px;
}
.right {
  width: 1019px;
}
.title {
  font-size: 28px;
  line-height: 31px;
  margin-bottom: 22px;
  font-weight: 600;
}
.info {
  font-size: 15px;
  color: #333333;
  line-height: 31px;
  width: 1019px;
  height: 220px;
  background: #f5faff;
  padding: 10px 30px;
}
.info div {
  width: 319px;
}
.info div :nth-child(2) {
  color: #1890ff;
  cursor: pointer;
}
::v-deep .ant-breadcrumb > span:last-child a {
  color: rgba(20, 146, 255, 1);
}
::v-deep .ant-modal {
  width: 1080px !important;
  /* top: 10px; */
}
::v-deep .ant-modal-body {
  padding: 40px;
  height: 780px;
}
::v-deep .ant-modal {
  padding-bottom: 0;
}
</style>
